<template>
	<div class="login">
		<div class="frame">
			<div class="title"><h3 v-text="PROJECT_NAME"></h3></div>
			<div class="content">
				<form method="post" class="form" @keydown.enter="submit">
					<div class="mdui-textfield mdui-textfield-floating-label">
						<i class="mdui-icon material-icons">account_circle</i>
						<label class="mdui-textfield-label">登录名</label>
						<input class="mdui-textfield-input" type="text" id="name" v-model="form.name" />
					</div>
					<div class="mdui-textfield mdui-textfield-floating-label">
						<i class="mdui-icon material-icons">lock</i>
						<label class="mdui-textfield-label">密　码</label>
						<input class="mdui-textfield-input" type="password" v-model="form.password" />
					</div>
					<div class="mdui-textfield">
						<a class="mdui-btn mdui-ripple mdui-color-theme submit" @click="submit">登录</a>
					</div>
				</form>
			</div>
			<div class="login_footer">&copy; 2016 {{PROJECT_NAME}} {{domain}} All rights reserved</div>
		</div>
	</div>
</template>
<script>
	export default {
		data(){
			return {
				PROJECT_NAME : PROJECT_NAME,
				form: {
					name : '',
					password : '',
					captcha : '',
				},
				domain : location.href.substring(7).split('/')[0],
			};
		},
		methods : {
			submit(){
				let t = this;
				t.$API.post('/login',this.form).then(function(data,message){
					t.tips(message);
					t.$emit('init');
					t.$router.push({name:'welcome'});
				}).catch(function(msg){
					
				});
			}
		},
		mounted(){
			this.$emit('initClear');
			document.getElementById('name').focus()
		}
	}
</script>

<style>
	.frame {
		background-color:#FFF;
		padding:20px;
		max-width:30rem;
		margin:10% auto;
		border-radius: 5px;
	}
	.frame .submit {
		margin-left:3.5rem;
		cursor:pointer;
	}
	.frame .login_footer {
		padding:10px 0;
		border-top:1px solid #CCC;
	}
</style>
